<template>
	<div class="mainbody" v-resize="handleResize">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>首页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-box">
			<el-row :gutter="20">
				<el-col :span="16" :xs="24">
					<el-row :gutter="20">
						<el-col :xs="24" :md="12" class="mab-20">
							<el-row :gutter="20">
								<el-col :span="24">
									<el-card class="card-panel">
										<div class="title-box">
											<span class="text">订单数量</span>
											<span class="date">今日</span>
										</div>
										<div class="num-box">
											<span class="num">{{orderCount}}</span>
											<span class="text">单</span>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-col>
						<el-col :xs="24" :md="12" class="mab-20">
							<el-row :gutter="20">
								<el-col :span="24">
									<el-card class="card-panel">
										<div class="title-box">
											<span class="text">销售金额</span>
											<span class="date">今日</span>
										</div>
										<div class="num-box">
											<span class="num">{{orderAmount}}</span>
											<span class="text">元</span>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-col>
						<el-col :xs="24" :md="12" class="mab-20">
							<el-row class="ibtn-box" :gutter="20">
								<el-col :span="12">
									<el-card>
										<a @click="$common.linkUrl('/shop/goods/list')">
											<i class="el-icon-goods"></i>
											<span>商品管理</span>
										</a>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card>
										<a @click="$common.linkUrl('/order/list')">
											<i class="el-icon-document"></i>
											<span>订单管理</span>
										</a>
									</el-card>
								</el-col>
							</el-row>
						</el-col>
						<el-col :xs="24" :md="12" class="mab-20">
							<el-row class="ibtn-box" :gutter="20">
								<el-col :span="12">
									<el-card>
										<a @click="$common.linkUrl('/order/delivery/list')">
											<i class="el-icon-truck"></i>
											<span>发货管理</span>
										</a>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card>
										<a @click="$common.linkUrl('/merchant/setting')">
											<i class="el-icon-setting"></i>
											<span>店铺设置</span>
										</a>
									</el-card>
								</el-col>
							</el-row>
						</el-col>
						
						<el-col :span="24" class="mab-20">
							<el-card>
								<div id="userChart" ref="userChart" style="height:248px;"></div>
							</el-card>
						</el-col>
						<el-col :span="24" class="mab-20">
							<el-card>
								<div id="orderChart" ref="orderChart" style="height:248px;"></div>
							</el-card>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8" :xs="24">
					<el-row>
						<el-col :span="24" class="mab-20">
							<el-card>
								<div slot="header" class="clearfix">
									<i class="el-icon-s-shop"></i>
									<span>店铺信息</span>
								</div>
								<div class="cinfo-box">
									<div class="dl-box clearfix">
										<dl>
											<dt>店铺名称</dt>
											<dd>{{user.title}}</dd>
										</dl>
										<dl>
											<dt>店铺类型</dt>
											<dd>{{user.storeTitle}}</dd>
										</dl>
										<dl>
											<dt>店铺类型</dt>
											<dd>{{user.categoryTitle}}</dd>
										</dl>
										<dl>
											<dt>账户余额</dt>
											<dd>{{user.amount}} 元</dd>
										</dl>
										<dl>
											<dt>不可用余额</dt>
											<dd>{{user.frozenAmount}} 元</dd>
										</dl>
										<dl>
											<dt>联系人姓名</dt>
											<dd>{{user.realName}}</dd>
										</dl>
										<dl>
											<dt>联系电话</dt>
											<dd>{{user.mobile}}</dd>
										</dl>
										<dl>
											<dt>账户状态</dt>
											<dd>
												<el-tag size="mini" type="success" effect="dark" v-if="user.isLock==0">正常</el-tag>
												<el-tag size="mini" type="warning" effect="dark" v-else>待审核</el-tag>
											</dd>
										</dl>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="24" class="mab-20">
							<el-card>
								<div slot="header" class="clearfix">
									<i class="el-icon-s-data"></i>
									<span>商品销量榜</span>
								</div>
								<div class="store-box">
									<dl v-for="(item,index) in goodsList" :key="index">
										<dt>
											<span class="number" v-if="index<9">0{{index+1}}</span>
											<span class="number" v-else>{{index+1}}</span>
											<span class="title">{{item.title}}</span>
										</dt>
										<dd>
											<span class="count">{{item.saleCount}} 件</span>
										</dd>
									</dl>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		props: {
			user: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				orderCount: 0,
				orderAmount: 0,
				memberList: [
					{ title: '10月1日',total: 2 },
					{ title: '10月2日',total: 5 },
					{ title: '10月3日',total: 12 },
					{ title: '10月5日',total: 23 },
					{ title: '10月8日',total: 12 },
					{ title: '10月20日',total: 11 },
				],
				orderList: [
					{ title: '10月1日',amount: 10566 },
					{ title: '10月2日',amount: 30512 },
					{ title: '10月3日',amount: 20206 },
					{ title: '10月4日',amount: 10677 },
					{ title: '10月5日',amount: 8999 },
					{ title: '10月6日',amount: 6500 },
					{ title: '10月7日',amount: 34236 },
				],
				goodsList: [
					{ title: '304不锈钢炒菜锅煎锅 平底炒锅不粘炒锅', saleCount: 120 },
					{ title: '炒锅铁锅炒菜锅无涂层真不锈燃气炒', saleCount: 110 },
					{ title: '汤锅珐琅锅铸铁锅炖锅煮锅多容量可选搪瓷锅煲汤煮面煮粥锅燃气电磁炉通用', saleCount: 108 },
					{ title: '食用油 AE非转基因菜籽油', saleCount: 102 },
					{ title: '玻尿酸保湿润肤沐浴露500ml 洗护二合一香味持久', saleCount: 98 },
					{ title: '纳诺怡护发 大功率速干 电吹风机 EH-WNA3B', saleCount: 86 },
					{ title: '原装进口食品 代餐主食 早餐饼干糕点', saleCount: 54 },
					{ title: '印尼进口纳宝帝Nabati儿童休闲零食奶酪味威化饼干', saleCount: 51 },
					{ title: '伊朗进口无漂白大颗粒开心果罐装坚果炒货休闲零食干果小吃', saleCount: 30 },
					{ title: '蛋白质全脂纯牛奶 新西兰进口牛奶 250ml*10盒 礼盒装纯牛奶', saleCount: 15 }
				],
				echartList: [],
			}
		},
		methods: {
			//初始化会员图表
			initMemberChart() {
				//处理数据
				let userData = {
					title: [],
					data: [],
				}
				this.memberList.map(item => {
					userData.title.push(item.title);
					userData.data.push(item.total);
				});
				//基于准备好的dom，初始化echarts实例
				let userChart = echarts.init(this.$refs.userChart);
				this.echartList.push(userChart);
				//绘制图表
				userChart.setOption({
					color: ['#3398DB'],
					title: { text: '店铺关注情况', subtext: '默认显示当月统计数据', textStyle: { fontSize: 16, fontWeight: "normal" } },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '5%',
						width: 'auto',
						height: 'auto',
						containLabel: true,
					},
					xAxis: {
						data: userData.title,
						axisTick: {
							alignWithLabel: true,
						},
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						name: '新增用户',
						type: 'bar',
						data: userData.data,
					}],
				});
			},
			//初始化订单图表
			initOrderChart() {
				//处理数据
				let orderData = {
					title: [],
					data: [],
				}
				this.orderList.map(item => {
					orderData.title.push(item.title);
					orderData.data.push(item.amount);
				});
				//基于准备好的dom，初始化echarts实例
				let orderChart = echarts.init(this.$refs.orderChart);
				this.echartList.push(orderChart);
				//绘制图表
				orderChart.setOption({
					color: ['#3398DB'],
					title: { text: '订单金额统计', subtext: '默认显示当月统计数据', textStyle: { fontSize: 16, fontWeight: "normal" } },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '5%',
						width: 'auto',
						height: 'auto',
						containLabel: true,
					},
					xAxis: {
						data: orderData.title,
					},
					yAxis: {
						type: 'value',
						minInterval: 1,
					},
					series: [{
						name: '销售金额',
						type: 'line',
						data: orderData.data,
					}],
				});
			},
			//页面发生变化回调
			handleResize () {
				this.echartList.forEach((chart) => {
					chart.resize();
				});
			},
			//初始化数据
			initData() {
				let _this = this;
				let day = new Date();
				//获取今日订单总数据
				_this.$api.request({
					url: '/merchant/order/view/count?startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
					success(res) {
						_this.orderCount = res.data;
					},
				});
				//获取今日订单总金额
				_this.$api.request({
					url: '/merchant/order/view/amount?startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
					success(res) {
						_this.orderAmount = res.data;
					},
				});
				//获取本月订单金额列表
				_this.$api.request({
					url: '/merchant/report/order/amount/count',
					success(res) {
						_this.orderList = res.data;
						if(_this.$refs.orderChart) {
							_this.$nextTick(() => {
								_this.initOrderChart();
							});
						}
					},
				});
				//获取本月店铺收藏列表
				_this.$api.request({
					url: '/merchant/report/member/favorite/count',
					success(res) {
						_this.memberList = res.data;
						if(_this.$refs.userChart) {
							_this.$nextTick(() => {
								_this.initMemberChart();
							});
						}
					},
				});
				//获取商品排行列表
				_this.$api.request({
					url: '/merchant/shop/goods/view/10',
					success(res) {
						_this.goodsList = res.data;
					},
				});
			},
		},
		mounted() {
			this.initData();
		},
		//使用局部注册指令的方式
		directives: {
			resize: { // 指令的名称
				bind (el, binding) { //el为绑定的元素，binding为绑定给指令的对象
					let width = '', height = '';
					function isReize () {
						const style = document.defaultView.getComputedStyle(el);
						if (width !== style.width || height !== style.height) {
							binding.value();  //关键
						}
						width = style.width;
						height = style.height;
					}
					el.__vueSetInterval__ = setInterval(isReize, 300);
				},
				unbind (el) {
					clearInterval(el.__vueSetInterval__);
				}
			},
		},
	}
</script>

<style lang="scss">
	.card-panel {
		.title-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			line-height: 20px;
			.text {
				color: #666;
				font-size: 16px;
			}
			.date {
				padding: 0 6px;
				border: 1px solid #6394f9;
				border-radius: 3px;
				color: #6394f9;
				font-size: 12px;
				background: #f4f7ff;
				text-align: center;
			}
		}
		.num-box {
			line-height: 38px;
			height: 38px;
			.num {
				color: #303133;
				font-size: 30px;
				font-weight: 700;
			}
			.text {
				margin-left: 5px;
				color: #999;
				font-size: 12px;
			}
		}
	} 
	.ibtn-box {
		margin-top: -20px;
		.el-col {
			margin-top: 20px;
		}
		.el-card {
			width: 100%;
			a {
				display: block;
				margin: -20px;
				padding: 12px;
				text-decoration: none;
				border-radius: 4px;
				text-align: center;
				cursor: pointer;
				-webkit-transition-duration: 0.4s;
				transition-duration: 0.4s;
				&:hover {
					background: #409eff;
					i,span {
						color: #fff;
					}
				}
				i {
					color: #409eff;
					font-size: 28px;
					height: 30px;
				}
				span {
					display: block;
					margin-top: 5px;
					color: #666;
					font-size: 14px;
					line-height: 20px;
				}
			}
		}
	}
	.cinfo-box {
		.el-divider {
			margin: 0 0 20px 0;
		}
		.dl-box {
			dl {
				clear: both;
				padding: 4px 0;
				height: 24px;
				line-height: 24px;
				font-size: 13px;
				dt {
					display: block;
					float: left;
					width: 80px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				dd {
					margin-left: 70px;
					color: #909399;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	.store-box {
		dl {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			padding: 5px 0;
			height: 26px;
			line-height: 26px;
			color: #606266;
			dt {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				.number {
					flex-shrink: 0;
					display: block;
					margin-right: 5px;
					color: #fff;
					font-size: 12px;
					font-weight: 600;
					border-radius: 2px;
					background: #E6A23C;
					width: 20px;
					height: 20px;
					line-height: 20px;
					text-align: center;
				}
				.title {
					flex-grow: 1;
					color: #909399;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			dd {
				flex-shrink: 0;
				margin-left: 5px;
				.count {
					color: #888;
					font-weight: 600;
					white-space: nowrap;
				}
			}
		}
	}
</style>